<template>
	<div class="home">
	<header1 title="首页"></header1>

  
<div>
<div id="content" >

 
<div class="swiper-container" id="home_lunbotu" >
        <div class="swiper-wrapper">
           	<div class="swiper-slide"><router-link to="/shop"><img style="max-height:173.66px;width:100%;" src="../../images/a5c58a4941a04db6a7500b86ad661f16.jpg" alt=""></router-link></div>
           <div class="swiper-slide"><router-link to=""><img style="max-height:173.66px;width:100%;" src="../../images/e1868fb238d44237a150f56cd9360bdd.jpg" alt=""></router-link></div>

            <div class="swiper-slide"><router-link to="http://www.baidu.com"><img style="max-height:173.66px;width:100%;" src="../../images/faccf1f4f06c4d40ae328a3917b03aaf.jpg" alt=""></router-link></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
<a href="/#/shop"><img width="100%" src="../../images/d2f43e5bad11488188299f72098964d7.jpg"></a>


<div class="nav_class">
	<div class="nav_item">
		<div>
			<img src="../../images/bj.png" height="40" width="40" alt="">
			<span>白酒</span>
		</div>
		<div>
			<img src="../../images/hj.png" height="40" width="40" alt="">
			<span>红酒</span>
		</div>
		<div>
			<img src="../../images/yj.png" height="40" width="40" alt="">
			<span>洋酒</span>
		</div>
		<div>
			<img src="../../images/pj.png" height="40" width="40" alt="">
			<span>啤酒</span>
		</div>
		<div>
			<img src="../../images/hao.png" height="40" width="40" alt="">
			<span>好酒</span>
		</div>
	</div>
	<div class="nav_item">
		<div>
			<img src="../../images/xj.png" height="40" width="40" alt="">
			<span>新酒</span>
		</div>
		<div>
			<img src="../../images/qc.png" height="40" width="40" alt="">
			<span>清仓</span>
		</div>
		<div>
			<img src="../../images/tg.png" height="40" width="40" alt="">
			<span>团购</span>
		</div>
		<div>
			<img src="../../images/wl.png" height="40" width="40" alt="">
			<span>物流</span>
		</div>
		<div>
			<img src="../../images/gz.png" height="40" width="40" alt="">
			<span>关注</span>
		</div>
	</div>
</div>
<div class="kb">
	<div class="kb_content">
		<span><B>商城</B><img style="margin-bottom:2px;" src="../../images/kb.png" height="30"  alt="">：</span>
		  <div class="swiper-container1">
        <div class="swiper-wrapper" >
            <div class="swiper-slide" style="font-size:12px;" ><B style="color:red;">大促 </B>竞选店铺抢500元手机神券！</div>
            <div class="swiper-slide" style="font-size:12px;"><B style="color:red;">荐 </B>太平鸟地址2折 全程满500减50</div>
            <div class="swiper-slide" style="font-size:12px;"><B style="color:red;">大促 </B>礼遇情人节 前千万红包任性拿</div>
        </div>

        <div class="swiper-pagination1"></div>
    </div>

		<div class="kb_more">更多</div>
	</div>
</div>
<div class="ms">
	<div class="ms_title">
		<B>掌上秒杀</B>
		<span>更多商品等着你来抢<img src="../../images/ms_more.png" height="10" width="10" alt="">
		</span>
		
	</div>
	<div class="ms_items">

	<div class="swiper-container2">
        <div class="swiper-wrapper">
			<div class="swiper-slide ms_item">
			<img  data-img="https://img09.jiuxian.com/2016/0909/86e1074f535c42bcb75884a0a6e089de4.jpg" alt="">
			<p>52°潭酒仙潭特醇500ml</p>
			<p>¥19.00</p>
			<p><s>¥56.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img08.jiuxian.com/2016/0523/600e03fee4a1410fbc91eece160de7dc4.jpg" alt="">
			<p>54°国密董酒25 0ml</p>
			<p>¥89.00</p>
			<p><s>¥259.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img07.jiuxian.com/2016/1211/54193a38f7024461ad186fff186222b14.jpg" alt="">
			<p>智利萌萌哒葡萄酒750ml</p>
			<p>¥119.90</p>
			<p><s>¥168.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img10.jiuxian.com/2013/1002/8153888a471d430f8065a22f1c673c524.jpg" alt="">
			<p>52°五粮液(股份)五粮源普通装</p>
			<p>¥69.00</p>
			<p><s>¥79.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img09.jiuxian.com/2014/1212/beb02306cdf045dc9ed835262c2f90d24.jpg" alt="">
			<p>法国波尔多AOC菲拉德城堡干红</p>
			<p>¥69.00</p>
			<p><s>¥169.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img06.jiuxian.com/2016/1221/231530854a554033b01ad5478a517c954.jpg" alt="">
			<p>52°回沙潭酒500ml（双瓶装）</p>
			<p>¥119.00</p>
			<p><s>¥198.00</s></p>
			</div>
			<div class="swiper-slide ms_item">
			<img  data-img="https://img10.jiuxian.com/2017/0209/fced4adb53334c729c894320db80de774.jpg" alt="">
			<p>40°江小白高粱酒 300ml</p>
			<p>¥36.50</p>
			<p><s>¥45.00</s></p>
			</div>



        </div>
        <!-- Add Scrollbar -->
        <div class="swiper-scrollbar2"></div>
    </div>
	</div>

</div>


<img width="100%" max-height="173.66px" data-img="https://img08.jiuxian.com/bill/2017/0212/829aea9b74c34c0da0c04ca93f02d134.jpg" alt="">


<div class="jxpd">
	<div class="home_titleclass" ><img src="../../images/zs.png"  alt=""> 精选频道</div>
	<div class="jxpd_first">
	<img data-img="https://img08.jiuxian.com/bill/2016/1215/4687de37f6234716a9e8195d5fe0237f.jpg" alt="">
	<img data-img="https://img08.jiuxian.com/bill/2017/0127/437e79ab6ddb42ddbc7900a3114a8db1.jpg" alt="">
	</div>
	<div class="jxpd_second">
		<img data-img="https://img07.jiuxian.com/bill/2017/0116/981190c9f6494f2ab256f62926ec2777.jpg" alt="">
		<img data-img="https://img09.jiuxian.com/bill/2016/1215/14cd360fe77648c4834533b01da7bac9.jpg" alt="">
		<img data-img="https://img08.jiuxian.com/bill/2016/1215/688af1f0ef814967b5f2fd37e7715c2e.jpg" alt="">
	</div>
</div>



<div class="home_floors">
	<div class="home_titleclass" style="color:#d81e06;">
		<img src="../../images/home_1f.png"  height="128" width="128" alt="">
		白酒馆
	</div>
	<div class="home_floor">
		<img data-img="https://img06.jiuxian.com/bill/2017/0209/93290cd2896041fd8b27ec0c0b355165.jpg" alt="">
		<img data-img="https://img10.jiuxian.com/bill/2016/1129/09274ebae1294b16b336b3d02acf30b1.jpg" alt="">
		<img data-img="https://img09.jiuxian.com/bill/2016/1219/d875eeb4dd2e4e3980d1732bd26dbc2f.jpg" alt="">
		<img data-img="https://img08.jiuxian.com/bill/2017/0212/370098c800e6428fa0ecbb033cb53b5b.jpg" alt="">
	</div>
</div>

<div class="home_floors">
	<div class="home_titleclass" style="color:#d4237a;">
		<img src="../../images/home_2f.png"  height="128" width="128" alt="">
		红酒馆
	</div>
	<div class="home_floor">
		<img data-img="https://img07.jiuxian.com/bill/2017/0213/f2b4e05d3d5842998776ee73ba41de5e.jpg" alt="">
		<img data-img="https://img08.jiuxian.com/bill/2017/0109/2c17ff82c28f444bb2dead2faf0a9351.jpg" alt="">
		<img data-img="https://img08.jiuxian.com/bill/2016/1216/1442e75dac4944bface6e90316eabcda.png" alt="">
		<img data-img="https://img06.jiuxian.com/bill/2016/1118/734efa3655294f008ef5c6330e71a966.jpg" alt="">
	</div>
</div>

<div class="home_floors" >
	<div class="home_titleclass" style="color:#ea9518;">
		<img src="../../images/home_3f.png"  height="128" width="128" alt="">
		啤酒馆
	</div>
	<div class="home_floor">
		<img data-img="https://img10.jiuxian.com/bill/2017/0104/c8290ba174ec42cea440cff24000c194.jpg" alt="">
		<img data-img="https://img08.jiuxian.com/bill/2016/1220/0a80d25aa8a449b28fc537ba52e7106e.jpg" alt="">
		<img data-img="https://img07.jiuxian.com/bill/2016/1228/957eafe69edf42b4bc3d1b86c35583f4.jpg" alt="">
		<img data-img="https://img07.jiuxian.com/bill/2016/1228/bda705415dcd4ff39b999fb6df3b74be.jpg" alt="">
	</div>
</div>


<div class="home_tjtitle">
	<div style="widht:100%;height:20px;background:#f3f3f3;font-size:20px;text-align:center;padding-top:10px;color:gray">爆款推荐</div>
<ul class="home_tjitems">
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img09.jiuxian.com/2016/0831/8c9a6bc0f6cb4a8cb6d0e3b151363e1e4.jpg" alt="">
				<span>53°茅台飞天500ml</span>
				<Strong>￥1239.00</Strong>
				<del>¥1299.00</del>
			</div>

		</li>
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img07.jiuxian.com/2017/0104/1e6e5f6d1b744922aef2286d9394f0e44.jpg" alt="">
				<span>52°洋河镇蓝色国珍酒柔雅500ml*6+52°贵州茅台镇飞天不老大鸿运500ml</span>
				<Strong>￥119.00</Strong>
				<del>¥199.00</del>
			</div>

		</li>
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img08.jiuxian.com/2017/0105/7b1144d6c41f4a57bffc652476bb69d54.jpg" alt="">
				<span>【尖货特卖】50°古井贡酒·桃花春曲500ml（双瓶装）</span>
				<Strong>￥198.00</Strong>
				<del>¥276.00</del>
			</div>

		</li>
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img08.jiuxian.com/2017/0210/eda21e2732644e0094e6e688856afa664.jpg" alt="">
				<span>拉菲庄园2009珍酿原酒进口红酒艾格力古堡干红葡萄酒红酒礼盒木盒装750ml*2</span>
				<Strong>￥99.00</Strong>
				<del>¥138.00</del>
			</div>

		</li>
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img07.jiuxian.com/2015/0810/a1b6186daf1643f9b958977e1a4ecbfe4.jpg" alt="">
				<span>【尖货特卖】52°泸州老窖三人炫1000ml（双瓶装）+52°泸州老窖三人炫100ml</span>
				<Strong>￥179.00</Strong>
				<del>¥705.00</del>
			</div>

		</li>
		<li class="home_tjitem">
			<div class="home_tjxx">
				<img data-img="https://img08.jiuxian.com/2015/1217/b411c8a4726f4e448a030b6f61c5c7424.jpg" alt="">
				<span>【尖货特卖】38°扳倒井青花瓷700ml（6瓶装）</span>
				<Strong>￥129.00</Strong>
				<del>¥169.00</del>
			</div>

		</li>
</ul>
</div>


<div style="font-size:14px;width:100%;margin-left:1%;background:#f3f3f3;height:32px;line-height:32px;color:#7f7f7f;text-align:center;">点击继续加载</div>
<div id="home_backtop" onclick="javascript:document.body.scrollTop=0" style="position:fixed;z-index:888;width:32px;height:32px;bottom:52px;right:10px;display:none;"><img width="32" height="32" src="http://st.360buyimg.com/m/images/index/scroll-to-top-icon.png" alt=""></div>
    </div>


 </div>


<div id="content1" style="padding-top:55px;font-size:14px;padding-left:3%;padding-right:3%;display:none;">
	<div>热门搜索<img id="home_hwchange" src="../../images/home_shuaxin.png" height="20" width="20" alt="" style="float:right;"></div>
	<div style="width:100%; display: -webkit-flex;display: flex; flex-direction: row  ;flex-wrap:wrap;justify-content:space-between;text-align:center;">
		<div style="margin-top:5px;line-height:20px;border-radius:10px;width:30%;height:20px;font-size:14px;color:#bfbfbf;border:1px solid #bfbfbf;"  v-for="(word,key) in words" 	>{{word}}</div>
	</div>

</div>

</div>


</template>
<style type="text/css" lang="less">
	
	@import "./../../common/css/swiper-3.3.1.min.css";
	@import "./../../common/css/reset.css";
	
#content{
	width: 100%;
	padding-bottom: 50px;
	position: relative;
	overflow: hidden;
}

	/*白酒管*/
	.home_floors{
			width:100%;
			height: 220px;
			padding-top: 5px;
			padding-bottom: -5px;
		.home_floor{
			width:100%;
			img:nth-child(1){
				display:block;
				float: left;
				width:38%;
				height: 190px;
			}
			img:nth-child(2){
				display:block;
				float: left;
				width:62%;
			}
			img{
				display:block;
				float: left;
				width:31%;
			}

		}
	}

.home_titleclass{
	height:30px;
			text-align: center;
			padding-top: 5px;
			background: #f3f3f3;
			font-size: 20px;
			color: #1296db;
			img{
				width: 23px;
				height: 23px;
				margin-top: -4px;

			}
}






	/*图标组*/
	.nav_class{
		width: 100%;
		height: 134px;
		padding-bottom: 5px 0;
		background: #f3f3f3;
		position: relative;
		.nav_item{

			height: 50%;
			position: relative;
			div{
				float: left;
				width: 20%;
				height: 100%;
				padding-top: 2px;
				padding-bottom: 2px;
				position: relative;
				img{
					position: absolute;
					left: 25%;
				}
				span{
					position: absolute;
					left: 32%;
					top:60%;
					font-size: 16px;

				}

			}
		}
	}

	/*快报*/
	.kb{
		background:  #f3f3f3;
		height: 30px;
		width: 100%;
		font-size: 14px;
		padding-bottom: 5px;
		padding-top: 15px;
		position: relative;
		line-height: 20px;
		
		.kb_content{
			width: 96%;
			height: 20px;
			margin-left: 2%;
			background: white;
			padding-bottom: 5px;
			overflow: hidden;
			border-radius: 5px;
			span{
			display: inline-block;
			width: 25%;
			height: 100%;
			margin-left: 1%;
			/*color: white;*/
			/*background: red;*/
			}
			.swiper-container1{
				display:inline-block; 
				width: 61%;
				height: 30px;
			}

			.kb_more{
				text-align: center;
				width: 10%;
				height: 100%;
				display: inline-block;
				/*background: green;*/
				}
		}
		
	}

	/*秒杀*/
	.ms{
		height: 180px;
		overflow: hidden;

		/*标题*/
		.ms_title{
			height: 20px;
			/*background: red;*/
			padding-top: 5px;
			padding-left: 3%;
			font-size: 14px;
			
			span{
				float:right;
				color: red;
			}
		}
		.ms_items{
			font-size: 12px;
			height: 160px;
			.ms_item{
				width: 29%;
				height: 100%;
				img{
					height: 91px;
					margin-left: 7%;
				}
				p:nth-child(3){
					color: red;
					font-size: 16px;
					text-align: center;
				}
				p{
					
					width: 80%;
					margin-left: 10%;
					
				}
				:nth-child(4){
					text-align: center;
					color: gray;
				}
			}
		}
	}


	/*精选频道*/
	.jxpd{
		width:100%;
		height: 250px;
		
		.jxpd_first{
			width:100%;
			height: 100px;
			img{
				display: block;
				float: left;
				width:50%;
				height: 100px;
			}
		}
		.jxpd_second{
			width:100%;
			height: 100px;
			img{
				display: block;
				float: left;
				width:33.33%; 
			}
		}
	}


.home_tjtitle{
		height: 750px;
	.home_tjitems{
		width: 100%;
		position: relative;
		height:720px;
		list-style: none;
		 display: -webkit-flex; /* Safari */
  		display: flex;
  		flex-wrap:wrap;
  		justify-content:space-between;
		background: #f3f3f3;
		.home_tjitem{
			display: inline-block;
			/*float: left;*/
			width:49.5%;
			height: 240px;
			/*margin-top: 5px;*/
			box-sizing:border-box;
			background: white;
			padding-top: 10px;
			border-top: 5px solid #f3f3f3;
			.home_tjxx{
				width:100%;
				height: 98%;
				font-size: 14px;

				img{
					width: 100%;
				}
				span{
					display: inline-block;	
					width: 90%;
					height: 24px;
					line-height: 12px;
					margin-top: 3px;
					font-size: 12px;
					margin-left: 16px;
					overflow: hidden;
				}
				Strong{
					color: red;
					margin-left: 16px;
				}
				del{
					font-size: 12px;
					color: #999;
				}
			}

		}
	}


	}
		


</style>

<script type="text/javascript">
	// import JQuery from "../../common/js/jquery-3.1.1.min.js";
	import Swiper from './../../common/js/swiper-3.3.1.min.js';
	import Home from './../../common/js/home.js';//导入Home 若要用
	import Header1 from '../../component/header/header1.vue';
	
	
	export default {
		components:{
			Header1,Swiper
		},
		data(){
			return{
				items:[
					{con:"内容1"},
					{con:"内容2"},
					{con:"内容3"}
				],
				words:[],
			}
			 },
			 //创建完后执行  执行js
		mounted(){

			var _this=this;
			this.init3();
			// Home.init2();
			// this.other3();
			// console.log(__dirname);
			// var img=document.getElementById("img");
			// 	img.src=require("../../images/red_select.png");

		var hotwords=["老白干","二锅头","珠江啤酒","百年糊涂","马爹利","白兰地","威士忌","青岛啤酒","茅台","五粮液","牛栏山","长城","张裕","葡萄酒","人头马","雪花啤酒","伏加特"];
		var hotword=[];
		function hotword_change(){
			hotword=[];
			for(var i=0;i<100;i++){
				var theword=hotwords[parseInt(Math.random()*16)];
				if(hotword.indexOf(theword)==-1){
				hotword.push(theword);
			if(hotword.length==6||hotword>6){
				break;
			}
			else continue;
		}
		else continue;
		}


	}
		hotword_change();
		this.words=hotword;
		console.log(hotword);

		//this代表vue 可以更改data的值
		// console.log(this.items);





	//懒加载
	 (function(){


	 	




	 	//搜索栏点击切换
	 	$("#home_keyword").click(function(){
			$("#home_header1").hide();
			$("#home_header2").show();
			$("#content").hide();
			$("#content1").show();
			$(".nav").hide();
			$("#home_backhome").click(function(){
				$("#home_header2").hide();
				$("#home_header1").show();
				$("#content1").hide();
				$("#content").show();
				$(".nav").show();
			})
		})



	 	//热搜词改变
		$("#home_hwchange").click(function(){
			hotword_change();
			console.log(_this);
			for(var i =0; i<6;i++){
			_this.$set(_this.words,i,hotword[i]);
			}
		})


	var lis = document.getElementsByTagName("img");
    console.log("图片"+lis.length);
    window.onscroll = function(){
    	//懒加载
//  1.获取当前窗口滚动的一个高度(前者标准后者IE支持的方法)
      var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
//  2.获取可视区域的一个高度(前者标准后者IE支持的方法)    
     var height = window.innerHeight||document.documentElement.clientHeight;
   
// 开始设置
   for (var i = 0;i < lis.length;i++) {
    var img = lis[i];
//  判断
    if (lis[i].offsetTop <=scrollTop+ height) {
    	if(img.getAttribute('data-img')&&img.src==""){
    		console.log(img.getAttribute('data-img'));
         img.src = img.getAttribute('data-img');

     }
//       img.removeAttribute('data-img');
    }

   }


   	//搜索栏颜色变化
   	if(($("#home_header1").offset().top+$("#home_header1").height())>$("#home_lunbotu").height()){
   		$("#home_header1").css("background","#e5383b")
   	}
   	else{
   		$("#home_header1").css("background","-webkit-linear-gradient(bottom,rgba(0,0,0,0.2),rgba(0,0,0,0.4))");
   		}
   	



   	//返回顶端

   	if(document.body.scrollTop >document.body.clientWidth/2){
   		$("#home_backtop").show();
   	}
   	else{
   		$("#home_backtop").hide();
   	}
   	
   	



    };

})();

		},
		methods:{
			init3:function(){
				console.log("初始化");
				Home.init2();
			}
			,
			// other3:function({
			// 	return Home.other2();
			// })
		}
		}


</script>